<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="kener.linfeng@gmail.com">
    <title>ECharts · Home</title>

    <link rel="shortcut icon" href="./doc/asset/ico/favicon.png">

    <link href="./doc/asset/css/font-awesome.min.css" rel="stylesheet">
    <link href="./doc/asset/css/bootstrap.css" rel="stylesheet">
    <link href="./doc/asset/css/carousel.css" rel="stylesheet">
    <link href="./doc/asset/css/echartsHome.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        blockquote {
            font-size: 14px;
        }
    </style>
</head>

<body>

<img id="logo" src="doc/asset/img/logo.png" style="display:none;" alt="">

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="5"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item">
            <img src="./doc/asset/img/banner1.png" alt="ECharts"/>
        </div>
        <div class="item">
            <img src="./doc/asset/img/banner2.png" alt="ECharts"/>
            <div class="container">
                <div class="carousel-caption" style="bottom:0;left:25%">
                    <p style="text-align:left;">
                        <a class="btn btn-lg btn-warning" href="./doc/example-en.html#gauge" role="button">View »</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./doc/asset/img/banner3.png" alt="ECharts"/>
            <div class="container">
                <div class="carousel-caption" style="bottom:0;left:25%">
                    <p style="text-align:left;">
                        <a class="btn btn-lg btn-warning" href="./doc/example/bar12.html#-en" role="button">View »</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./doc/asset/img/banner4.png" alt="ECharts"/>
            <div class="container">
                <div class="carousel-caption" style="bottom:0;left:25%">
                    <p style="text-align:left;">
                        <a class="btn btn-lg btn-warning" href="./doc/example/theme.html#-en" role="button">View »</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item active">
            <img src="./doc/asset/img/bannerStudy.png" alt="ECharts基础教程" style="width:100%;left:0;margin:0"/>
            <div class="container">
                <div class="carousel-caption ecx-link">
                    <a href="http://study.163.com/course/courseMain.htm?courseId=1016007" target="_blank">了解更多 »</a>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./doc/asset/img/bannerX.jpg" alt="ECharts-X" style="width:100%;left:0;margin:0"/>
            <div class="container">
                <div class="carousel-caption ecx-link">
                    <a href="http://ecomfe.github.io/echarts-x" target="_blank">View »</a>
                </div>
            </div>
        </div>

    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->

<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">
    <h1 class="text-center" style="margin-bottom:30px;">BRING YOUR DATA TO LIFE</h1>
    <!-- Three columns of text below the carousel -->
    <div class="row">
        <div class="col-lg-4">
            <img class="col-lg-12" src="doc/asset/img/feature1.png" alt="Echarts Drag-Recalculate"
                 style="margin-bottom:20px"/>
            <h2>DRAG-RECALCULATE</h2>
            <p class="text-left">Our "Drag-Recalculate" feature (patented) brings you the best user experience ever: by
                allowing you to effectively extract, integrate, or even exchange data among multiple charts, ECharts
                opens you up every opportunity for data mining and integration.</p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
            <img class="col-lg-12" src="doc/asset/img/feature2.png" alt="Echarts dataView" style="margin-bottom:20px"/>
            <h2>BIG DATA MODE</h2>
            <p class="text-left">Got tens of millions of data to present? And once again professional statistical tools
                (e.g. MATLAB) seem like the only option left? Nope, not anymore! Despite rich interactivity, ECharts can
                still plot up to 200,000 data points on a Cartesian chart (line, column, scatter, candlestick) in the
                blink of an eye. </p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
            <img class="col-lg-12" src="doc/asset/img/feature3.png" alt="Echarts Scale Roaming"
                 style="margin-bottom:20px"/>
            <h2>SCALE ROAMING</h2>
            <p class="text-left">The colors in the Cartesian chart (like map or scatter) will help you to classify data
                at first glance. But how to focus on data that matters after the initial analysis? With our "Scale
                Roaming" feature, you can turn off other scales and focus on the scale you are interested in with just a
                click.</p>
        </div><!-- /.col-lg-4 -->
        <p class="pull-right"><a href="doc/feature.html">Read More »</a></p>
    </div><!-- /.row -->

    <div class="row featurette thx">
        <h1 class="text-center">OPINIONS</h1>
        <div class="col-lg-6">
            <blockquote>
                <p>"ECharts is a treasure, not just for China, but also for the world."</p>
                <br/>
                <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/shearwarp" target="_blank">Chen Wei,
                    Professor at Zhejiang University</a></small>
            </blockquote>
        </div>
        <div class="col-lg-6">
            <blockquote>
                <p>"ECharts, the beauty of data visualization!"</p>
                <br/>
                <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/shenhaolaoshi" target="_blank">Shen Hao,
                    Professor at Communication University of China</a></small>
            </blockquote>
        </div>

        <div class="col-lg-3">
            <blockquote>
                <p>"ECharts is not only the best, but also the most improved visualization tool I know. Hopes are high
                    that it will become a world-class open source project before long."</p>
                <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/u/2006785117" target="_blank">Huang Zhimin,
                    CTO of Caixin Media</a></small>
            </blockquote>
        </div>
        <div class="col-lg-6">
            <blockquote>
                <p>"ECharts is a most impressive tool for data visualization: it's fully open-source, it's
                    sophisticated-yet-flexible, and it keeps abreast of the era of 'big data'! I hope that ECharts will
                    stick to the open source approach and bring into full play the power of community, so as to better
                    serve users at home and abroad and create greater value in business and society."</p>
                <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/DataScientistUnion" target="_blank">Xing
                    Bao, Founder of DataUnion</a></small>
            </blockquote>
        </div>
        <div class="col-lg-3">
            <blockquote>
                <p>"It is my fervent hope that ECharts 2.0 can make their visualization more vivid, charts more shining,
                    interaction more agreeable and leave their users nothing to worry about."</p>
                <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/u/1688425190" target="_blank">Hong Bei, CTO
                    of AdMaster</a></small>
            </blockquote>
        </div>
        <div class="col-lg-4">
            <blockquote>
                <p>"We have tried all kinds of charting tools - foreign and domestic, free and paid - for many years,
                    and we say that ECharts absolutely stands out in the free ones, and is even comparable to the best
                    of the paid ones."</p>
                <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/tiemuyu" target="_blank">Yu Jie, GM of
                    ResearchInChina</a></small>
            </blockquote>
        </div>
        <div class="col-lg-4">
            <blockquote>
                <p>"ECharts is open, simple and elegant. 1.0 was great, and 2.0 was leapfrogged in just a year with
                    something even more amazing. Anecdotally, some of my American friends are learning ECharts with
                    online translators!"</p>
                <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/cosname/" target="_blank">Xie Yihui,
                    Founder of Capital of Statistics</a></small>
            </blockquote>
        </div>
        <div class="col-lg-4">
            <blockquote>
                <p>"ECharts represents a new generation of visualization tools for big data. I really hope that it will
                    soon support mobile platforms, so that we can have the freedom to explore big data at our fingertips
                    - both literally and figuratively."</p>
                <small><i class="fa fa-weibo"></i> <a href="http://weibo.com/austinhu" target="_blank">Hu Song, CTO of
                    haizhi</a></small>
            </blockquote>
        </div>


        <div class="col-md-12 user text-center">
            <a href="http://www.baidu.com" target="_blank"><img src="http://www.baidu.com/img/baidu_jgylogo3.gif"
                                                                alt="到百度首页" title="到百度首页"></a>
            <a href="http://dev2.baidu.com/index.do" target="_blank"><img src="http://dev2.baidu.com/zh/img/zh-logo.jpg"
                                                                          alt="百度商业开发者中心" title="百度商业开发者中心"></a>
            <a href="http://zhanzhang.baidu.com/" target="_blank"><img
                    src="http://zhanzhang.baidu.com/static/img/zhanzhang_logo.png" alt="百度站长平台" title="百度站长平台"></a>
            <a href="http://adm.baidu.com/index.html" target="_blank"><img src="doc/asset/img/logo/adm_logo.png"></a>
            <a href="http://jiaoyu.baidu.com/mp/index" target="_blank"><img
                    src="http://vs-static.baidu.com/edu/newjuhe/asset/img/logo137.png"></a>
            <a href="http://jiankang.baidu.com/" target="_blank"><img src="doc/asset/img/logo/health_logo.png"></a>
            <a href="http://wenku.baidu.com/" target="_blank"><img
                    src="http://static.wenku.bdimg.com/static/widget/common/header/search_box/images/logo-wk-137-46_3164f22b.png"></a>
            <a href="http://hui.baidu.com/" target="_blank"><img src="doc/asset/img/logo/hui_logo.png" alt="百度汇"
                                                                 title="百度汇"></a>

            <a href="http://yuedu.baidu.com/" target="_blank"><img
                    src="http://static.wenku.bdimg.com/static/widget/common/read/header/images/read_logo_657abbba.png"></a>
            <a href="http://sd.baidu.com/zh/" target="_blank"><img src="doc/asset/img/logo/sd_logo.png"></a>
            <a href="http://renqi.baidu.com/" target="_blank"><img src="doc/asset/img/logo/renqi_logo.png"
                                                                   style="background-color: #0d5ab1"></a>
            <a href="http://trends.baidu.com/" target="_blank"><img
                    src="http://trends.baidu.com/static/trends-index/widget/header/top_logo_b308a5a.png"
                    style="background-color: #264597"></a>
            <a href="http://www.stats.gov.cn/english/" target="_blank"><img
                    src="http://www.stats.gov.cn/english/images/name.png" style="background-color: #015FA5"></a>

            <a href="http://www.admaster.com.cn/" target="_blank"><img src="doc/asset/img/logo/admaster_logo.png"></a>
            <a href="http://www.mi.com/" target="_blank"><img
                    src="http://img03.mifile.cn/webfile/images/2014/cn/icon/site-logo.png"></a>
            <a href="http://www.miaozhen.com/" target="_blank"><img
                    src="http://www.miaozhen.com/style/images/GW_logo.jpg"></a>
            <a href="http://www.semidata.com/index.php" target="_blank"><img
                    src="http://datavisualization.miaozhen.com/SemiData_logo.png"></a>
            <a href="http://www.sgcc.com.cn/" target="_blank"><img
                    src="http://www.sgcc.com.cn/images/header/header_logo_0106.png"></a>
            <a href="http://www.piccnet.com.cn/" target="_blank"><img src="doc/asset/img/logo/picc_logo.gif"></a>
            <a href="http://www.sinopec.com/" target="_blank"><img src="doc/asset/img/logo/sinopec_logo.gif"></a>
            <a href="http://www.lenovo.com.cn/" target="_blank"><img
                    src="http://img.hc360.com/printing/info/images/200812/200812161055278334.jpg"></a>
            <a href="http://www.huawei.com/cn/" target="_blank"><img src="doc/asset/img/logo/huawei_logo.jpg"></a>

            <a href="http://www.dangdang.com/" target="_blank"><img
                    src="http://img4.ddimg.cn/00012/dang/logo_dd.gif"></a>
            <a href="http://lashou.com/" target="_blank"><img src="http://s1.lashouimg.com/static/img/index/logo02.png"></a>
            <a href="http://www.vip.com/" target="_blank"><img
                    src="http://pic.iresearch.cn/news/201304/635018302584062500.jpg"></a>
            <a href="http://tv.pptv.com/" target="_blank"><img src="http://photocdn.sohu.com/20120207/Img334013169.jpg"></a>
            <a href="http://www.caixin.com/" target="_blank"><img src="doc/asset/img/logo/caixin_logo.png"></a>
            <a href="http://www.jjckb.cn/" target="_blank"><img src="doc/asset/img/logo/xinhuanet_logo.gif"></a>
            <a href="http://news.sina.com.cn/" target="_blank"><img
                    src="http://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"></a>
            <!--a href="http://news.qq.com/newspedia/all.htm" target="_blank" ><img src="http://mat1.gtimg.com/news/newspedia/images/news_baike.png"></a-->
            <a href="http://news.qq.com/" target="_blank"><img src="doc/asset/img/logo/qqnews_logo.jpg"></a>

            <a href="http://mp.weixin.qq.com/s?__biz=MjM5MTQzNzU2NA==&mid=200577643&idx=1&sn=09a5a468fb76af4fb1b1155e63c61ab0#rd"
               target="_blank"><img src="http://t1.qpic.cn/mblogpic/89bd83e9c419b39a3e06/460.jpg"></a>
            <a href="http://www.shujubang.com/index.html" target="_blank"><img
                    src="doc/asset/img/logo/shujubang_logo.png"></a>
            <a href="http://www.futureweather.cn/" target="_blank"><img
                    src="http://www.qx17.cn/_c_xKeZGQlsF8eHtUZXc63DP_L01zSR_ao8biwTU2VFqcomEOG4im0Ghomh19TkUeP7kimak9lDWS8Y-8dld2ohLx9bWw6ag9Gu.png"></a>
            <a href="http://www.ctrip.com/" target="_blank"><img src="http://pic.c-ctrip.com/common/c_logo2013_2x.png"></a>
            <a href="http://www.jinjianginns.com/" target="_blank"><img src="doc/asset/img/logo/jinjiang_logo.jpg"></a>
            <a href="http://www.51job.com/default.php" target="_blank"><img
                    src="http://img01.51jobcdn.com/im/2009/logo/logo2009.gif"></a>
            <a href="http://www.alibaba.com/new_user_guide.html" target="_blank"><img
                    src="http://company.zhaopin.com/CompanyLogo/20080514/49F73DB7F6DF4AA486280906822B3E46.gif"></a>
            <a href="http://www.yonyou.com/" target="_blank"><img src="doc/asset/img/logo/yongyou_logo.jpg"></a>
            <a href="http://www.pactera.com/" target="_blank"><img
                    src="http://www.pactera.com/wp-content/themes/pactera/images/buttons/logo-menu.png"></a>
            <a href="http://shujuguan.cn/" target="_blank"><img src="doc/asset/img/logo/shujuguan_logo.png"></a>
            <div style="font-weight: bolder">...</div>
        </div>
    </div>

    <div class="row featurette" style="padding-bottom: 0;">
        <div class="col-md-12">
            <h1 class="text-primary" style="margin-bottom: 20px;">
                <small>The Era of Big Data</small>
                <br/><strong>IT'S TIME TO REDEFINE DATA CHARTS</strong></h1>
            <p class="lead">We are just doing our best to present your data in its own <span
                    class="text-primary">true</span> aspect, and provide you with intuitive, interactive ways for data
                <span class="text-primary">mining, extraction, correction or integration</span>, so that you can <span
                        class="text-primary">focus on</span> what you are interested in. Legend Switch, Area Zoom, and
                Value Filter let you <span
                        class="text-primary">analyze your data in ways you didn't think possible</span>. </p>
        </div>
        <div class="col-md-12">
            <p class="lead" style="margin-bottom: 0;">Look at the charts created using <span class="text-primary">ECharts</span>,
                you are no longer just a "reader"; you can also be a "creator". This is <span class="text-primary">ECharts</span>,
                a <strong class="text-primary">GUI-based</strong> data visualization tool that we are working on.</p>
        </div>
    </div>
    <div class="jumbotron">
        <h1 style="font-size: 80px;margin-bottom:30px;">LET'S GO!</h1>
        <a class="btn btn-large btn-warning" href="./doc/start-en.html"><i class="fa fa-paper-plane"></i> Get
            started</a>
    </div>
    <!-- /END THE FEATURETTES -->

    <div class="row featurette e-list" style="padding-bottom: 0;">
        <p>ECharts is an open source from the data visualization team of Baidu <a href="http://efe.baidu.com/">EFE</a>.
            In <a href="http://efe.baidu.com/">EFE</a>, we also have:</p>
        <dl>
            <dt><a target="_blank" href="https://github.com/ecomfe/esl">ESL</a></dt>
            <dd>Leaner, more efficient and more robust AMD Loader than Require.js.</dd>
            <dt><a target="_blank" href="http://ecomfe.github.io/etpl/">ETpl</a></dt>
            <dd>Reusable, flexible, and high performance JavaScript template engine.</dd>
            <dt><a target="_blank" href="http://ecomfe.github.io/edp/">EDP</a></dt>
            <dd>Provides the front-end development tool: project and package management, debug, build, test etc. and
                allow users to custom extend.
            </dd>
            <dt><a target="_blank" href="https://github.com/ecomfe/er">ER</a></dt>
            <dd>RIA web framework, which is suitable for building a single page AJAX web application.</dd>
            <dt><a target="_blank" href="https://github.com/ecomfe/esui">ESUI</a></dt>
            <dd>A set of perfect functions, and has strong extension mechanism UI library. Base on template, declarative
                programming let the View more powerful.
            </dd>
            <dt><a target="_blank" href="http://ecomfe.github.io/est/">EST</a></dt>
            <dd>Base on Less style, provide a series of convenient mixin way, can output just in debug mode.</dd>
            <dt><a target="_blank" href="https://github.com/ecomfe/saber">Saber</a></dt>
            <dd>Provide a JavaScript model, CSS style and development platform etc, which is a complete the front-end
                solutions for mobile SPA project.
            </dd>
            <dt><a target="_blank" href="https://github.com/ecomfe/rider">Rider</a></dt>
            <dd>Designed for mobile device, mixin style library. Base on it, we create the Rider UI, a flexible UI
                library.
            </dd>
            <dt><a target="_blank" href="http://efe.baidu.com/">......</a></dt>
        </dl>
    </div>
</div><!-- /.container -->

<!-- FOOTER -->
<footer id="footer"></footer>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./doc/asset/js/jquery.min.js"></script>
<script type="text/javascript" src="./doc/asset/js/echartsHome.js"></script>
<script src="./doc/asset/js/bootstrap.min.js"></script>
</body>
</html>
